<script setup>
// import axios from 'axios'
import{ref,watch}from'vue'
import { fetch24HourData } from '@/api/weatherAPI';
import { initBasicLineChart} from '@/util/echerts'
//y引入折线图所需组件
// import * as echarts from 'echarts/core';
// import { GridComponent } from 'echarts/components';
// import { LineChart } from 'echarts/charts';
// import { UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
//声明一个变量获取24小时天气数据，有24个
import dayjs from 'dayjs'

const hour24 =ref([])
const hour24FxTime=ref([])//存放24小时预报时间
 const hour24Temp=ref([])//存放未来24小时的温度
 const updateTime=ref('')//天气更新时间

 import { useCityStore } from '../stores/cityStore';
  const cityStore = useCityStore()
 getData(cityStore.location.id)
// function getData(){
//   axios
//   .get('https://devapi.qweather.com/v7/weather/24h', {
//     params: {
//       location:'101010100',
//       key:'7c6dcc5163e94db784ea1f51c0bb85ca',
//     },   
//   })
//   .then(function (response) {
//     console.log(response.data);
//     updateTime.value=dayjs(response.data.updateTime).format('YYYY年MM月DD日 HH时mm分')
//     hour24.value=response.data.hourly;
//     hour24.value.forEach((element)=>{
//       hour24FxTime.value.push(element.fxTime)
//       hour24Temp.value.push(element.temp)
//     })
//     initEcharts(
//       hour24FxTime.value.map((x)=> dayjs(x).format('HH')),
//       hour24Temp.value
//       );
//   })
//   .catch(function (error) {
//     console.log(error);
//   })
//   .finally(function () {
//     // 总是会执行
//   });  

// }
const chartDom =ref(null);

async function getData(locationID) {
  const response = await fetch24HourData(locationID)
  console.log(response);
      hour24FxTime.value=[]
      hour24Temp.value=[]
    updateTime.value=dayjs(response.updateTime).format('YYYY年MM月DD日 HH时mm分')
    hour24.value=response.hourly;
    hour24.value.forEach((element)=>{
      hour24FxTime.value.push(element.fxTime)
      hour24Temp.value.push(element.temp)
    })
    initBasicLineChart(
      chartDom.value,
      hour24FxTime.value.map((x)=> dayjs(x).format('HH')),
      hour24Temp.value
      );
}
watch(
  ()=>cityStore.location,
  ()=>{
    getData(cityStore.location.id)
  }
)
</script>

<template>
 <div>

  <h3>未来24小时天气预报</h3>
  <div>
  <span>最后更新时间：{{updateTime}}</span>
  </div>
  <div id="main" ref="chartDom"></div>
 </div>
</template>
<style scoped>
#main{
  width:100%;
  height:400px;
}
</style>
 